/*
 * @Author: lduoduo
 * @Date: 2021-04-13 15:32:14
 * @Last Modified by: lduoduo
 * @Last Modified time: 2021-04-16 15:02:13
 * bpmn控制器hooks, 这是在原始基础上的修改版
 */
import React, { useRef, useEffect } from 'react';

import BpmnModeler from 'bpmn-js/lib/Modeler';
import EmbeddedComments from 'bpmn-js-embedded-comments';

import propertiesPanel from 'bpmn-js-properties-panel'; // 这里引入的是右侧属性栏这个框
import propertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda'; // 而这个引入的是右侧属性栏里的内容
// import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

// import convert from 'xml-js';

import CustomPaletteModule from '~/components/Custom/index.palette';
import CustomRenderModule from '~/components/Custom/index.render';
import CustomPadModule from '~/components/Custom/index.contextpad';
import CustomTranslateModule from '~/components/Custom/index.translate';

import { initEventBus, initModelerEvents } from '~/utils/listeners';

import { fileDownload, setEncoded } from './helper';

const useBook = (props) => {
  const modeler = useRef();

  const start = (divId) => {
    modeler.current = new BpmnModeler({
      container: divId,
      keyboard: { bindTo: document },
      //添加属性板
      propertiesPanel: {
        parent: '#properties-panel'
      },
      additionalModules: [
        // 评论模块
        EmbeddedComments,

        // 元素工具栏
        CustomPadModule,

        // 右边工具栏
        propertiesPanel,
        propertiesProvider,

        // 左边工具栏
        CustomPaletteModule,

        // 中间画布
        CustomRenderModule,

        // 汉化模块
        CustomTranslateModule,
        {
          // paletteProvider: ['value', ''], // 禁用左面板
          // labelEditingProvider: ['value', ''], // 禁用编辑
          // contextPadProvider: ['value', ''], // 禁用点击出现的contextPad
          // bendpoints: ['value', {}], // 禁止流程线变换waypoints
          // zoomScroll: ['value', ''], // 禁止画布滚动
          // moveCanvas: ['value', ''], // 禁止拖拽
        },
      ],
      moddleExtensions: {
        // camunda: camundaModdleDescriptor,
      },
    });
  };

  const print = (type = 'xml') => () => {
    modeler.current.saveXML({ format: true }).then((e) => {
      if (type === 'xml') return console.log(e);

      // const t = convert.xml2json(e, { spaces: 2 });

      // console.log(t);
    });
  };

  const download = (type) => async () => {
    const Bpmn = modeler.current;

    const fn = type === 'svg' ? 'saveSVG' : 'saveXML';

    Bpmn[fn]({ format: true })
      .then((e) => {
        if (type === 'print') return console.log(e);

        const { href, filename } = setEncoded(type.toUpperCase(), e);
        fileDownload(href, filename);
      })
      .catch((e) => {
        return console.error(`[useBpmn Warn ]: ${e.message || e}`);
      });
  };


  const redo = () => {
    modeler.current.get('commandStack').redo();
  };

  const undo = () => {
    modeler.current.get('commandStack').undo();
  };

  const loadXml = (xml) => {
    const Bpmn = modeler.current;

    Bpmn.importXML(xml)
      .then(() => {
        initEventBus(Bpmn);
        initModelerEvents(Bpmn);
      })
      .catch((err) => {
        console.error('failed to load diagram', err);
      });
  };

  return {
    start,
    loadXml,
    print,
    download,
    redo,
    undo,
  };
};

export default useBook;
